import React from 'react';
import classnames from 'classnames';
import './index.less';
/**
 * <ReSlider min={-20} max={10} value={0} toFixed={1} onUpdate={ data => this.handleUpdate(data)} />
 */
export default class view extends React.Component {

    static propTypes = {
        className: React.PropTypes.string,
        max: React.PropTypes.number.isRequired,
        min: React.PropTypes.number.isRequired,
        value: React.PropTypes.number.isRequired,
        toFixed: React.PropTypes.number,
        onUpdate: React.PropTypes.func.isRequired,
        tips: React.PropTypes.element,
        onDragStart: React.PropTypes.func,
        onDragStop: React.PropTypes.func
    };

    static defaultProps = {
        max: 10,
        min: 0,
        value: 0,
        toFixed: 2,
        onDragStart: () => {},
        onDragStop: () => {}
    };

    constructor(props, context) {

        super(props, context);

        // init state;
        this.state = {
            barWidth: '0%',
            isDown: false,
            max: props.max,
            min: props.min,
            value: props.value,
            left: 0,
            width: 0
        };
    }

    updatePercent({ clientX }) {
        let value = this.getValue(clientX);

        if (clientX <= this.state.left) {
            value = this.state.min;
        } else if (clientX >= (this.getSliderRect().left + this.getSliderRect().width)) {
            value = this.state.max;
        }

        this.setState({
            value
        });
        // this.setPercent(this.state.max, this.state.min, value);
        this.props.onUpdate && this.props.onUpdate({
            min: this.state.min,
            max: this.state.max,
            value
        });
    }

    getBarWidth(max, min, value) {
        if (value > min && value <= max) {
            var barWidth = (value - min) / (max - min) * 100;
            return barWidth + '%';
        } else {
            return 0;
        }
    }

    getPercent(clientX) {
        return (clientX - this.getSliderRect().left) / this.getSliderRect().width;
    }

    getValue(clientX) {
        let percent = this.getPercent(clientX);
        let value = this.state.min + percent * (this.state.max - this.state.min);

        if (this.props.toFixed) {
            value = parseFloat(value.toFixed(this.props.toFixed));
        } else {
            let middle = (parseInt(value) * 2 + 1) / 2
            value = value.toFixed(2) > middle ? Math.ceil(value) : Math.floor(value);
            value = parseInt(value);
        }

        return value;

    }

    getSliderRect() {
        return this.$slider.getBoundingClientRect();
    }

    componentWillMount() {
        this._isMounted = true;
    }

    componentWillReceiveProps({ value, max, min }) {
        if (!this.state.isDown) {
            this.setState({
                value,
                max,
                min
            });
        }
    }

    componentDidMount() {
        //this.setSliderRect();
    }

    componentWillUnmount() {
        this._isMounted = false;
    }

    setSliderRect() {
        this.setState({
            left: this.getSliderRect().left,
            width: this.getSliderRect().width
        });
    }

    handleMouseDown(event) {
        this.setSliderRect()
        this.setState({
            isDown: true
        })
        document.addEventListener('mousemove', this.handleDragMouseMove)
        document.addEventListener('mouseup', this.handleMouseUp)
        this.onDragUpdate(event);
        this.props.onDragStart(event);
    }

    handleMouseMove(event) {
        if (this.state.isDown) {
            this.handleDragMouseMove(event)
        }
    }

    handleMouseUp = (event) => {
        this.setState({
            isDown: false
        });

        this.props.onDragStop(event);
        document.removeEventListener('mousemove', this.handleDragMouseMove);
        document.removeEventListener('mouseup', this.handleMouseUp);

        // console.log('handleMouseUp');
    }

    handleMouseLeave(e) {
        this.setState({
            isDown: false
        });
    }

    handleDragMouseMove = (event) => {
        event.preventDefault();
        event.stopPropagation();
        this.onDragUpdate(event);

    };

    onDragUpdate(event) {
        this.updatePercent(event);
    }

    render() {
        let classNames = classnames('orin-sw-reslider-root', this.props.className);
        let barWidth = this.getBarWidth(this.state.max, this.state.min, this.state.value);
        return (
            <div className={classNames}
                onMouseDown={e => this.handleMouseDown(e)}
                onMouseMove={e => this.handleMouseMove(e)}
                onMouseUp={e => this.handleMouseUp(e)}
                onMouseLeave={e => this.handleMouseLeave(e)}
                >
                <div className="slider-runway" ref={ slider => { this.$slider = slider ;}}>
                    <div className="slider-bar" style={{width: barWidth}}></div>
                    <div className="slider-btn" style={{left: barWidth}}>
                        { this.props.tips ? this.props.tips : null }
                    </div>
                </div>
            </div>
        );
    }
}
